import { getArticleDetailAPI } from "@/api/article.api.ts";
import { useEffect, useState } from "react";
import "highlight.js/styles/atom-one-dark.css";
import Markdown from "@/components/Markdown";
import { BookOpenCheck, Clock4 } from "lucide-react";

interface Article {
    title: string;
    cover: string;
    tags: string[];
    isTop: boolean;
    content: string;
    summary: string;
    likeCount: number;
    readCount: number;
    updatedAt: string;
    createdAt: string;
}

function CurrentArticle() {

    const [article, setArticle] = useState<Article>({
        title: "",
        cover: "",
        tags: [],
        isTop: false,
        content: "",
        summary: "",
        likeCount: 0,
        readCount: 0,
        updatedAt: "",
        createdAt: ""
    });
    useEffect(() => {
        const id = location.pathname.split('/').pop();
        (async () => {
            const res = await getArticleDetailAPI(id as string); 
            console.log(res);
            
            setArticle(res.data.data)
        })();
    }, []);
    return (
        <>
            {/* 文章封面 */}
            <div className="relative h-[600px] select-none">
                <img
                    src={article.cover}
                    alt="cover"
                    className="w-full h-full object-cover"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent">
                    <div className="max-w-[800px] mx-auto px-6 h-full flex flex-col justify-end pb-16">
                        <h1 className="text-4xl font-bold text-white mb-4">
                            {article.title}
                        </h1>
                        <div className="flex items-center gap-6 text-white/80 mb-4">
                            <span className="flex items-center gap-2">
                                <Clock4 size={20} />
                                {article.updatedAt}
                            </span>
                            <span className="flex items-center gap-2">
                                <BookOpenCheck size={20} />
                                15 分钟阅读
                            </span>
                        </div>
                        <div className="flex gap-2 mb-6">
                            {
                                article.tags.map((tag, index) => (
                                    <span
                                        key={index}
                                        className="bg-white/10 px-4 py-1 rounded-full text-white text-sm"
                                    >
                                        {tag}
                                    </span>
                                ))
                            }
                        </div>
                        <p className="text-white/90 text-lg leading-relaxed">
                            {article.summary}
                        </p>
                    </div>
                </div>
            </div>
            <>
                <Markdown content={article.content} />
            </>

        </>
    )
}

export default CurrentArticle;